
import React, { useState, useEffect } from 'react'
import style from './index.module.scss'
import { Divider, Dropdown, NavBar, Popup } from 'antd-mobile'
import { useNavigate, useParams } from 'react-router-dom'
import { regions } from './list'
import { Sidebar, List } from 'react-vant';
import axios from 'axios'
const Index: React.FC = () => {
  const { indexs } = useParams()
  console.log(indexs);
  const [activeIndex, setActiveIndex] = useState(0)
  const navigate = useNavigate()
  const [active, setActive] = useState(0);
  const [visible2, setVisible2] = useState(false)
  const [currentPage, setCurrentPage] = useState(1);
  const [pageSize, setPageSize] = useState(10);
  const [list, setList] = useState<any>([])
  const [list2, setList2] = useState([])
  const [items, setItems] = useState(localStorage.getItem('keshi'))
  const [findished, setFindished] = useState(false);
  const [cityitems, setCityitems] = useState('全国')
  // const [allData, setAllData] = useState<any>([]);
  const [citys, setCitys] = useState(JSON.parse(localStorage.getItem('citys') as any) || '')
  const getlist = async () => {
    const res = await axios.get('/api/city', { params: { address: citys.city, keshi: items } })
    setList2(res.data)
    console.log(res);
  }
  // const getlist2 = async () => {
  //   const res = await axios.get('/api/date')
  //   console.log(res);
  //   setList2(res.data.data)
  // }
  const onLoad = async () => {
    const res = await axios.get("/api/date", {
      params: {
        pageSize,
        currentPage,
      },
    });
    const { data, code } = res.data;
    if (code === 200) {
      //修改页码+1
      setCurrentPage(currentPage + 1);
      //合并数据
      setList([...list, ...data]);
      console.log(data);
    } else {
      setFindished(true); //数据加载完成
    }
  };
  useEffect(() => {
    getlist()
    setCityitems(items || citys)
  }, [items])


  const shaikeshi = (item: any) => {
    localStorage.setItem('keshi', item)
    setItems(item)
    navigate(0)
  }
  const handleClick = (citys: any) => {
    if (citys.city == '全国') {
      localStorage.removeItem('citys')
    } else {
      localStorage.setItem('citys', JSON.stringify(citys))
    }
    navigate(0)
  }

  return (
    <div>
      <NavBar onBack={() => navigate(-1)}>
        {
          indexs == 0 ? '康复训练' : <div>
            {
              indexs == 1 ? '心里咨询' : <div>
                {
                  indexs == 2 ? '护理咨询' : <div>
                    {
                      indexs == 3 ? '营养饮食' : '用药咨询'
                    }
                  </div>
                }
              </div>
            }
          </div>
        }
      </NavBar>

      <Popup
        visible={visible2}
        onMaskClick={() => {
          setVisible2(false)
        }}

        onClose={() => {
          setVisible2(false)
        }}
        position='top'
        bodyStyle={{ height: '50vh', overflow: 'auto' }}
      >
        <Dropdown closeOnMaskClick={false}>
          <Dropdown.Item key='sorter' title={citys ? citys.city : '全国'} >

            <div style={{ height: '300px', overflow: 'auto' }}>
              <div className={style.activebox}>
                <div className={style.activeleft}>
                  {

                    regions.map((item, index) => {
                      return <div key={index} className={index === activeIndex ? style.active : ''} onClick={() => setActiveIndex(index)}>
                        {item.name}
                      </div>
                    })
                  }
                </div>
                <div className={style.activeright}>
                  {
                    regions[activeIndex].cities.map((city, index) => {
                      return <div key={index} onClick={() => handleClick({ city })}>
                        {city}
                      </div>
                    })
                  }
                </div>
              </div>
            </div>

          </Dropdown.Item>
          <Dropdown.Item key='bizop' title={items ? items : '全部科室'}>
            <div style={{ height: '300px', overflow: 'auto' }}>
              <List finished={findished} onLoad={onLoad}>
                {list.map((item: any, index: any) => (
                  <div key={index} >
                    <div style={{ marginTop: '10px', paddingLeft: '10px' }} onClick={() => shaikeshi(item.keshi)}>
                      {item.keshi}
                    </div>

                  </div>
                ))}
              </List>
            </div>

          </Dropdown.Item>

        </Dropdown>

      </Popup>

      {/* <img src={require('./images/kfxl1.gif')} alt="" /> */}
      {
        indexs == 0 ? <div className={style.box1}>
          <div>
            <img src="../../src/img/kfxlimg/kfxl1.gif" alt="" />
            <p>骨科康复</p>
          </div>
          <div>
            <img src="../../src/img/kfxlimg/kfxl2.gif" alt="" />
            <p>脊柱康复</p>

          </div>
          <div>
            <img src="../../src/img/kfxlimg/kfxl3.gif" alt="" />
            <p>脑血管病</p>
            <p>康复</p>
          </div>
          <div>
            <img src="../../src/img/kfxlimg/kfxl4.gif" alt="" />
            <p>盆底功能</p>
            <p>康复</p>
          </div>
          <div>
            <img src="../../src/img/kfxlimg/kfxl5.gif" alt="" />
            <p>自闭/孤独</p>
            <p>康复</p>
          </div>
          <div>
            <img src="../../src/img/kfxlimg/kfxl6.gif" alt="" />
            <p>儿童语言</p>
            <p>康复</p>
          </div>
          <div>
            <img src="../../src/img/kfxlimg/kfxl7.gif" alt="" />
            <p>脑瘫/发育</p>
            <p>迟缓康复</p>
          </div>
        </div> : <div>
          {
            indexs == 1 ? <div className={style.box1}>
              <div>
                <img src="../../src/img/xlzximg/xlzx1.gif" alt="" />
                <p>心理咨询</p>
              </div>
              <div>
                <img src="../../src/img/xlzximg/xlzx2.gif" alt="" />
                <p>儿童青少</p>
                <p>年心理</p>
              </div>
              <div>
                <img src="../../src/img/xlzximg/xlzx3.gif" alt="" />
                <p>社交障碍</p>
              </div>
              <div>
                <img src="../../src/img/xlzximg/xlzx4.gif" alt="" />
                <p>家庭婚姻</p>
                <p>问题</p>
              </div>
              <div>
                <img src="../../src/img/xlzximg/xlzx5.gif" alt="" />
                <p>性心理</p>

              </div>
            </div> : <div>
              {
                indexs == 2 ? <div className={style.box1}>
                  <div>
                    <img src="../../src/img/hlzximg/hlxz1.gif" alt="" />
                    <p>PICC/静脉</p>
                    <p>港护理</p>
                  </div>
                  <div>
                    <img src="../../src/img/hlzximg/hlxz2.gif" alt="" />
                    <p>产前/产后</p>
                    <p>护理</p>

                  </div>
                  <div>
                    <img src="../../src/img/hlzximg/hlxz3.gif" alt="" />
                    <p>透析病人</p>
                    <p>护理</p>
                  </div>
                  <div>
                    <img src="../../src/img/hlzximg/hlxz4.gif" alt="" />
                    <p>褥疮/溃疡</p>
                    <p>护理</p>
                  </div>
                  <div>
                    <img src="../../src/img/hlzximg/hlxz5.gif" alt="" />
                    <p>母乳喂养</p>
                  </div>
                  <div>
                    <img src="../../src/img/hlzximg/hlxz6.gif" alt="" />
                    <p>造口/伤口</p>
                    <p>护理</p>
                  </div>
                  <div>
                    <img src="../../src/img/hlzximg/hlxz7.gif" alt="" />
                    <p>日常护理</p>

                  </div>
                  <div>
                    <img src="../../src/img/hlzximg/hlxz8.gif" alt="" />
                    <p>更多</p>

                  </div>
                </div> : <div>
                  {
                    indexs == 3 ? <div className={style.box1}>
                      <div>
                        <img src="../../src/img/yyysimg/yyys1.gif" alt="" />
                        <p>减肥增重</p>
                      </div>
                      <div>
                        <img src="../../src/img/yyysimg/yyys2.gif" alt="" />
                        <p>孕产妇营</p>

                      </div>
                      <div>
                        <img src="../../src/img/yyysimg/yyys3.gif" alt="" />
                        <p>肿瘤营养</p>
                      </div>
                      <div>
                        <img src="../../src/img/yyysimg/yyys4.gif" alt="" />
                        <p>慢性病营养</p>
                      </div>
                      <div>
                        <img src="../../src/img/yyysimg/yyys5.gif" alt="" />
                        <p>消化、外</p>
                        <p>科及重…</p>
                      </div>
                    </div> : <div className={style.box1}>
                      <div>
                        <img src="../../src/img/yyzximg/yyzx1.gif" alt="" />
                        <p>用药咨询/</p>
                        <p>指导</p>
                      </div>
                      <div>
                        <img src="../../src/img/yyzximg/yyzx2.gif" alt="" />
                        <p>孕产妇用</p>
                        <p>药</p>
                      </div>
                      <div>
                        <img src="../../src/img/yyzximg/yyzx3.gif" alt="" />
                        <p>儿童用药</p>
                      </div>
                      <div>
                        <img src="../../src/img/yyzximg/yyzx4.gif" alt="" />
                        <p>肝肾功能</p>
                        <p>不全人…</p>
                      </div>
                      <div>
                        <img src="../../src/img/yyzximg/yyzx5.gif" alt="" />
                        <p>感染用药</p>
                      </div>
                      <div>
                        <img src="../../src/img/yyzximg/yyzx6.gif" alt="" />
                        <p>保健用药</p>

                      </div>
                      <div>
                        <img src="../../src/img/yyzximg/yyzx7.gif" alt="" />
                        <p>联合用药</p>

                      </div>
                      <div>
                        <img src="../../src/img/yyzximg/yyzx8.gif" alt="" />
                        <p>更多</p>

                      </div>
                    </div>
                  }
                </div>
              }
            </div>
          }
        </div>
      }


      <Dropdown>
        <Dropdown.Item key='sorter' title={citys ? citys.city : '全国'} onClick={() => setVisible2(true)}>

          {/* <div style={{ height: '480px'}}>
       
          
        </div> */}

        </Dropdown.Item>
        <Dropdown.Item key='bizop' title={items ? items : '全部科室'} onClick={() => setVisible2(true)}>

        </Dropdown.Item>

      </Dropdown>
      {
        cityitems == '' ? <List finished={findished} onLoad={onLoad}>
          {list.map((item: any, index: any) => (
            <div key={index} className={style.listbox} onClick={() => navigate(`/zbyzdetatils/${item.id}`)}>
              <div className={style.listbox1}>
                <img src={item.image} alt="" />
                <div className={style.listbox1right}>
                  <div>{item.name}</div>
                  <div>{item.type}</div>
                  <div>{item.address}</div>
                  <div>{item.keshi}&nbsp;{item.hospital}</div>
                  <div></div>
                </div>
              </div>
              <div>{item.shanc}</div>
              <div className={style.listxt}></div>
            </div>
          ))}
        </List> : <div>
          {
            list2.length > 0 && list2.map((item: any, index: number) => {
              return <div key={index} className={style.listbox} onClick={() => navigate(`/zbyzdetatils/${item.id}`)}>
                <div className={style.listbox1}>
                  <img src={item.image} alt="" />
                  <div className={style.listbox1right}>
                    <div>{item.name}</div>
                    <div>{item.type}</div>
                    <div>{item.keshi}&nbsp;{item.hospital}</div>
                    <div></div>
                  </div>
                </div>
                <div>{item.shanc}</div>
                <div className={style.listxt}></div>
              </div>
            })
          }
          <div style={{ textAlign: 'center', marginTop: '20px' }}>没有更多数据了~</div>
        </div>
      }


    </div>
  )
}

export default Index
